<template>
    <div class="headder">
        <div class="head-cont clear">
            <div class="logo-lk fl">
               <a :href="baseUrl" class="logo-c">
                    <img v-if="logo_url" :src="BASE_URL + logo_url" alt="logo">
                    <img v-else src="../../../../public/logo.png" alt="logo">
                </a>
                <span @click="goHome" v-if="logo_txt" class="logo-txt" style="cursor:pointer" :title="logo_txt">{{logo_txt}}</span>
                <i>·</i>
                <a href="javascript:void(0)" class="link-home">邮箱</a>
            </div>
            <div class="title-icon">
                <el-popover
                    placement="bottom-end"
                    width="380"
                    trigger="click">
                    <div class="email-tips">
                        <li>附件只存放一个月，超出系统会自动删除</li>
                        <li>编辑邮件每8分钟自动保存一次至草稿箱中（附件不保存）</li>
                        <li>手动保存会进行替换系统自动保存的邮件</li>
                        <li>发送会删除系统自动保存的邮件</li>
                    </div>
                    <el-button slot="reference" icon="el-icon-warning" circle title="提示" size="mini"></el-button>
                </el-popover>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            baseUrl: process.env.BASE_URL,
            logo_url: sessionStorage.getItem('logoUrl'),
            logo_txt: sessionStorage.getItem('siteTitle')
        };
    },
    methods: {
        goHome() {
            window.location = this.baseUrl;
        }
    },
};
</script>
<style lang="scss">
.email-tips {
    li {
        list-style-type: disc;
        line-height: 30px;
        font-size: 14px;
    }
}

.headder {
    background: #fff;
    height: 80px;
    box-shadow: 0 2px 4px 0 rgba(195, 195, 195, 0.3);
}

.head-cont {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 25px;
    height: 100%;

    .title-icon {
        position: absolute;
        right: 34px;
    }
}

.logo-lk {
    display: flex;
    align-items: center;
    >a {
        line-height: 40px;
    }

    >i {
        margin: 0 5px;
        font-size: 20px;
        font-weight: bold;
    }
    .logo-c{
        display: inline-block;
        vertical-align: top;
        max-width: 180px;
        height: 48px;
        overflow: hidden;
        >img{
            width: 100%;
        }
        >span{
            font-size: 22px;
            margin: 0 5px 0 10px;
            font-weight: bold;
        }
    }
    .logo-txt{
        max-width:300px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .link-home {
        font-size: 16px;
        color: #000000;
        letter-spacing: 2px;
    }
}
</style>